<template lang="html">
  <div class="login">
     <Header>
       <div class="header-flex" slot="content">
        <mu-icon value="arrow_back" @touchend="clickBack"></mu-icon>
        <span class="title">登陆</span>
        <span class="right" @touchend="$router.replace('/index')">首页</span>
       </div>
    </Header>
     <section class="content">
     <div class="img">
      <img src="img/images/ia_100000919.png" alt="">
    </div>
    <mu-container>
      <mu-form ref="form" :model="data" class="mu-demo-form" auto-validate>
        <mu-form-item label="手机号"  prop="phone" :rules="phoneRules" label-float icon="phone" class="inputs">
					<mu-text-field v-model="data.phone" prop="phone" type="num"></mu-text-field>
        </mu-form-item>
        <mu-form-item label="密码" prop="password" :rules="passwordRules" label-float icon="lock" class="inputs">
          <mu-text-field type="password" v-model="data.password" prop="password" autocomplete="on"></mu-text-field>
        </mu-form-item>
        <mu-form-item >
          <div class="btn">
            <mu-button color="primary" @click="submit">提交</mu-button>
          </div>
        </mu-form-item>
      </mu-form>
      <div class="register">
        <router-link to="/register">注册</router-link>
        <router-link to="/forgetPassword">忘记密码？</router-link>
      </div>
    </mu-container>
  </section>

	<!-- 弹框 -->
	<mu-container >
		<mu-dialog title="Dialog" width="360" :open="openSimple" class="alert">
			<h3 slot="title">合规投资者认定</h3>
			<div class="text">
				<p>根据《私募投资基金监控管理暂行办法》，夜郎财富只对"具备相应风险识别能力和风险承担能力，对投资私募基金的特定合格投资者宣传，推介相关私募投资基金产品"。您需要身份认证后才能访问。主要要求有三：</p>
				<p>(一)家庭金融资产不低于500万元，或者近3年本人年均收入不低于40万元，且具有2年以上投资经历。</p>
				<p>(二)最近1年末净资产不低于1000万元的法人单位。</p>
				<p>(三)金融监督管理部门视为合格投资者的其他情形。</p>
			</div>
			<mu-divider></mu-divider>
			<mu-button slot="actions" flat color="orange" @click="openSimple = false">确定符合</mu-button>
		</mu-dialog>
	</mu-container>
  <Alert :data="alert"></Alert>

</div>
</template>

<script lang="js">
// 引入头部组件
import Header from '../components/Header';
// 引入弹框组件
import Alert from '../components/Alert';
// 引入校验规则
import { notEmpty, checkPassword, checkPhone } from '../tools/validators';

 
  export default  {
    name: 'login',
    props: [],
    // 组件注册
    components: { Header, Alert },
    mounted () {
      
    },
    data () {
      return {
        // 表单数据
        data: {
          phone: '',
          password: ''
        },
        // 校验规则
        phoneRules: [
          { validate: notEmpty, message: '请输入手机号' },
          { validate:  checkPhone, message: '手机号格式错误'}
        ],
        passwordRules: [
          {validate: notEmpty, message: '请输入密码'},
          {validate: checkPassword, message: '密码长度大于3小于25'}
				],
				// 是否默认打开弹框
        openSimple: true,
        // 信息提示框相关属性
        alert: {
            show: false,
            iconType: 'warning',
            text: '失败',
            color: 'error'
          }
      }
    },
    methods: {
		// 提交方法
		submit() {
      // 验证表单
      this.$refs.form.validate().then( res => {
        // 验证通过
        if(res) {
          // 发送表单信息
          this.$http
              .post('/api/user/login', this.data)
              // 监听信息
              .then( ({ data }) => {
                // 登陆成功
                if(data.code === 0) {
                  // 存储token
                  localStorage.setItem('token', data.token)
                  // 存储用户信息,转为字符串形式
									// this.$store.commit('userinfo', data.userinfo)
                  localStorage.setItem('userInfo', JSON.stringify(data.userinfo))
                  // 跳转页面
                  this.$router.replace('/home')
                }else {
                   // 登录失败, 弹框提示
                    // 提示文本修改
                    this.alert.text = data.msg + ',请检查用户名和密码';
                    // 变为显示状态
                    this.alert.show = true;
                    // 定时关闭
                    setTimeout(() => {
                      // 改变显示状态
                      this.alert.show = false;
                    }, 3000);
                }
              })
        }
      })
    },
    
			// 点击返回键的事件
			clickBack() {
				// 判断是否用户已注销
				if(!localStorage.getItem('token')) {
					// token不存在，用户已注销
					this.$router.replace('/index');
				}else {
					// 否则是返回上一个页面
						this.$router.go(-1)
				}
      }
    },
    computed: {

    }
}
</script>

<style lang="scss">
.login {
  .header-flex {
    display: flex;
    align-items: center;
    .title {
      text-align: center;
      flex: 1;
    }
    .right {
      font-size: 16px;
    }
  }

  .content {
    padding: 2.6rem 2.3rem 0 1.8rem;
    text-align: center;
    .img {
      img {
        width: 11.25rem;
      }
    }
    .inputs {
      padding-right: 1.5rem;
    }
    .btn {
      width: 100%;
      padding: 1.5rem 0 0 1rem;
    }
    .mu-raised-button {
      width: 100%;
      margin: 0;
    }
  }
  .register {
    display: flex;
    justify-content: space-between;
    padding-left: 1rem;
    a {
      color: #2196f3;
    }
	}

}
.mu-dialog {
	.mu-dialog-title {
		padding: 10px 20px 10px;
		color: #123123;
		h3 {
			// text-align: center!important;
			display: block;
			margin: 0 auto;
			font-size: 16px;
		}
	}
	.mu-dialog-body {
		padding: 0;
		.text {
			margin-bottom: 10px;
			padding: 0px 24px 0px;
			
			p {
				font-size: 12px;
				&:first-child {
					text-indent: 2em;
				}
			}
		}
	}
	.mu-dialog-actions {
		button {
			display: block;
			margin: 0 auto;
		}
	}
}

</style>
